<template>
    <div class="component-container">
        <el-form :model="props.status.systemTypeData" ref="systemTypeFormRef" :rules="rules" label-width="120px">
            <el-form-item label="名称" prop="name">
                <el-input v-model="props.status.systemTypeData.name" placeholder="请输入名称" clearable style="width: 240px" />
            </el-form-item>
            <el-form-item label="描述" prop="description">
                <el-input v-model="props.status.systemTypeData.description" placeholder="请输入描述" clearable
                    style="width: 240px" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Save" @click="save" :loading="buttonLoading">保存</el-button>
                <el-button type="primary" icon="Reset" @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script setup name="systemTypeBasicInformation" lang="ts">
import { updateSystemType } from "@/api/assess/system/systemType";

const { proxy } = getCurrentInstance() as ComponentInternalInstance;;
// 初始数据
let rawSystemTypeData = {
    name: "", description: ""
};

const buttonLoading = ref(false);
const systemTypeFormRef = ref<ElFormInstance>();
const rules = ref({
    name: [
        { required: true, message: "名称不能为空", trigger: "blur" }
    ]
});

const props = defineProps({
    status: {
        type: Object,
        default() {
            return {
                systemTypeData: {}
            };
        }
    }
})

function save() {
    systemTypeFormRef.value?.validate(async (valid: boolean) => {
        if (valid) {
            buttonLoading.value = true;
            await updateSystemType(props.status.systemTypeData).finally(() => buttonLoading.value = false);
            proxy?.$modal.msgSuccess("操作成功");
        } else {
            props.status.systemTypeData.name = rawSystemTypeData.name;
        }
    });
}

function reset() {
    props.status.systemTypeData.name = rawSystemTypeData.name;
    props.status.systemTypeData.description = rawSystemTypeData.description;
}

watch(() => props.status.systemTypeData, (value) => {
    rawSystemTypeData = JSON.parse(JSON.stringify(value))
})


onMounted(() => {
    rawSystemTypeData = JSON.parse(JSON.stringify(props.status.systemTypeData))
})
</script>
<style lang="scss" scoped></style>
